<template>
  <div>
    <button @click="toggleComponent">显示/隐藏组件</button>
    {{ dynamicComponent }}
    <keep-alive>
      <component :is="dynamicComponent" v-if="showComponent" />
    </keep-alive>
  </div>
</template>

<script>
import { ref } from 'vue';
import ComponentA from '../../component/ComponentA.vue';
import ComponentB from '../../component/ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  setup() {
    const showComponent = ref(true);
    const dynamicComponent = ref('ComponentA');

    const toggleShow = () => {
      showComponent.value = !showComponent.value;
    };

    const toggleComponent = () => {
      dynamicComponent.value = dynamicComponent.value === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    };

    return {
      showComponent,
      dynamicComponent,
      toggleShow,
      toggleComponent
    };
  }
}
</script>
